<template>
  <el-form-item :label="label" :prop="prop" v-if="fla">
    <el-select
        ref="my-select"
        :style="{width:width}"
        v-model="value"
        :multiple="multiple"
        :clearable="clearable"
        :placeholder="placeholder"
        :disabled="disable"
        :filterable="filterable"
        collapse-tags
        @change="changeEvent">
      <el-option
          v-for="(item,index) in list"
          :key="index"
          :label="item[optionName]"
          :value="item[optionValue]">
      </el-option>
    </el-select>
  </el-form-item>
</template>

<script>
export default {
  name: "SelectInput",
  props: {
    // 显示标签
    label: {
      type: String,
      default() {
        return ''
      }
    },
    // 表单验证
    prop: {
      type: String,
      default() {
        return ''
      }
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default() {
        return false
      }
    },
    // 输入提示
    placeholder: {
      type: String,
      default() {
        return '请选择' + this.label.replace(/[:：]/,'')
      }
    },
    // 清空按钮
    clearable: {
      type: Boolean,
      default() {
        return true
      }
    },
    // 下拉框数据列表
    list: {
      type: Array,
      default() {
        return []
      }
    },
    // 选项显示值
    optionName: {
      type: String,
      default() {
        return ''
      }
    },
    // 选项值
    optionValue: {
      type: String,
      default() {
        return ''
      }
    },
    // 清空表单标志位
    clearFla: Boolean,
    // 是否可用
    disable: {
      type: Boolean,
      default() {
        return false
      }
    },
    // 是否可以搜索
    filterable: {
      type: Boolean,
      default() {
        return true
      }
    },
    // 选中值发生变化时触发调用的函数
    changeEventFunction: Function,
    // 属于哪个弹窗类别
    dialogType: String,
    // input控件的宽度
    width: String,

    // 默认值
    defaultValue: {
      type: [String,Number],
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      // 输入的数据
      value: '',
      // 是否隐藏
      fla: true
    }
  },
  watch: {
    value() {
      let tem
      if (this.multiple && Array.isArray(this.value)) {
        tem = this.value.join(',')
      }else {
        tem = this.value
      }
      this.$emit('valueChangeEvent',this.prop,tem)
    },
    clearFla() {
      // 恢复默认值
      this.value = this.defaultValue
    },
  },
  created() {
  },
  mounted() {
    // 设置value，使用事件形式
    this.$on('setValue', (prop,newValue) => {
      if (prop == this.prop) {
        //多选
        if (this.multiple && newValue != '') this.value = newValue.split(',')
        else this.value = newValue
        this.changeEvent(this.value)
      }
    })
  },
  methods: {
    // 表单选择值改变触发事件
    changeEvent(val) {
      this.$nextTick(() => {
        if (this.changeEventFunction !== undefined) this.changeEventFunction(val,this.dialogType,this)
      })
    },
    // 隐藏此formItem
    hiddenItem() {
      this.$emit('valueChangeEvent',this.prop,'')
      this.fla = false
    },
    // 显示此formItem
    showItem() {
      this.fla = true
    }
  }
}
</script>

<style scoped>

</style>
